<template>
	<!-- <div class="equipmentEditor">
		
		<div class="pageContent">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">装备分类列表</div>
			</div>
		</div>
	</div> -->
	<div>
		<div class="breadcrumb">
			<el-button type="text" size=" " icon="el-icon-arrow-left" @click="$router.back()">返回上一页</el-button>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle">
				<div class="tableTitle">队伍基本信息</div>
			</div>
			<div class="tableBoxTable flex" style="margin-bottom: 50px;justify-content: space-between;">
				<div>
					<el-form ref="form" :model="serviceTeam" label-width="90px" size="mini">
						<el-form-item label="队伍名称：">
							<el-input v-model="serviceTeam.serviceTeamName" placeholder="请输入队伍名称" class="formWidth"></el-input>
						</el-form-item>
						<el-form-item label="服务区域：">
							<address-Cascader :value="serviceTeam.serviceAddressValue" :checkStrictly="true" placeholder="请选择地区" @getAddressData="getAddressData"></address-Cascader>
							<!-- <el-select v-model="sizeForm.region" class="formWidth" placeholder="选择/输入装备类型">
								<el-option label="区域一" value="shanghai"></el-option>
								<el-option label="区域二" value="beijing"></el-option>
							</el-select> -->
						</el-form-item>
					</el-form>
				</div>
				
				<!-- <equipmentType></equipmentType> -->
			</div>
			<div class="menberConTitle">
				<div class="tableTitle">队伍负责人信息</div>
			</div>
			<div class="tableBoxTable flex" style="margin-bottom: 50px;justify-content: space-between;">
				<div>
					<el-form ref="form" :model="serviceTeam" label-width="90px" size="mini">
						<el-form-item label="部门主管：">
							<el-select v-model="serviceTeam.userId" class="formWidth" placeholder="请选择主管" @change="selectionChange">
								<el-option v-for="item in mangmentUserList.items" :key="item.userId" :label="item.name" :value="item.userId"></el-option>
								<!-- <el-option label="区域二" value="beijing"></el-option> -->
							</el-select>
						</el-form-item>
						<el-form-item label="联系电话：">
							<el-input v-model="serviceTeam.phone" disabled placeholder="请输入联系电话" class="formWidth"></el-input>
						</el-form-item>
					</el-form>
				</div>
				
				<!-- <equipmentType></equipmentType> -->
			</div>
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">队伍成员配置</div>
				<el-button type="primary" round @click="dialogVisible = true">添加成员</el-button>
			</div>
			<div class="tableBoxTable">
				<serviceConfig ref="serviceConfig" @callback="serviceConfigcallback"></serviceConfig>
			</div>
		</div>
		<div class="submitBtns">
			<el-button type="primary" size=" " round="" @click="accomplish">完成</el-button>
		</div>
		<!-- 添加成员-->
		<el-dialog title="添加成员" :visible.sync="dialogVisible" width="30%">
				<el-table
				    ref="multipleTable"
				    :data="dialogTableData.items"
				    tooltip-effect="dark"
				    style="width: 100%"
					@select="rowSelect"
				    @selection-change="handleSelectionChange">
				    <el-table-column type="selection" width="55"> </el-table-column>
				    <el-table-column prop="name" label="姓名" ></el-table-column>
					<el-table-column prop="phone" label="电话" ></el-table-column>
					<el-table-column prop="mainCompanyName" label="主团队" ></el-table-column>
					<el-table-column prop="departmentName" label="部门" ></el-table-column>
					<el-table-column prop="dutiesName" label="职务" ></el-table-column>
					<!-- <el-table-column prop="address" label="主管">
						<template slot-scope="scope">
							<el-button type="text" size=" " v-if="scope.row.userId == dialogData.director" @click="setAdmins('')">取消主管</el-button>
							<el-button type="text" size=" " v-else :disabled="dialogData.director?true:false" @click="setAdmins(scope.row)">设为主管</el-button>
						</template>
					</el-table-column> -->
				  </el-table>
				  <pagina-tion :totalNum="dialogTableData.totalNum" @paginaClick="dialogTableDataPaginaClick"></pagina-tion>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="confirmAdd">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import serviceConfig from '../components/serviceConfig.vue'
	export default {
		components:{
			serviceConfig
		},
		data() {
			return {
				serviceTeam:{
					// 服务队名称
					serviceTeamId: '',
					serviceTeamName: '',
					serviceAddress: '',
					serviceAddressId: '',
					serviceAddressValue: [],
					userId: '',
					phone: ''
				},
				principal: {
					// 负责人信息
					userId: '',
					phone: ''
				},
				mangmentUserList: '', // 队伍成员列表
				sizeForm:{},
				// 弹窗
				dialogQueryData: {
					companyId: '',
					teamId: '',
					page: 1,
					pageSize: $globalData.pageSize
				},
				dialogVisible: false,
				dialogTableData: '',
				dialogSelectData: new Map(), // 记录表格已选择的数据
				dialogData: {
					name: '',
					value: ''
				},
			}
		},
		mounted() {
			// key: "110000/110100/110101/110101001", text: "北京市/北京市/东城区/东华门街道"
			// console.log(this.$route.params.id)
			this.dialogQueryData.companyId = this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId
			// console.log(this.$route.params.id)
			if(this.$route.params.id){
				this.dialogQueryData.teamId = this.$route.params.id
				this.$refs.serviceConfig.serviceTeamId = this.$route.params.id
				this.$refs.serviceConfig.getPageData()
				// 获取服务队信息
				this.getPageData()
				// 获取主管列表
				this.getMangmentUserList()
			}
			
		},
		watch: {
			dialogVisible(newData){
				if(newData){
					this.getMenbers()
				} else {
					this.dialogSelectData.clear()
				}
			}
		},
		methods: {
			getPageData(){
				this.$request.postForm(this.$api.getTeamDetail, {
					teamId: this.$route.params.id
				}).then(res=>{
					if(res.code == 200){
						let data = res.data
						// 服务队名称
						this.serviceTeam.serviceTeamName = data.serviceName
						this.serviceTeam.serviceAddress = data.serviceAddress
						if(data.serviceAddressId){
							this.serviceTeam.serviceAddressId = data.serviceAddressId
							this.serviceTeam.serviceAddressValue = data.serviceAddressId.split('/')
						}
						// 负责人信息
						this.serviceTeam.userId = data.id
						this.serviceTeam.phone = data.directorPhone
						
						// console.log(this.serviceTeam.serviceAddressValue)
						// console.log(data)
					}
				})
			},
			getMangmentUserList(){
				this.$request.postForm(this.$api.findServiceTeamIdQuery, {
					serviceTeamId: this.$route.params.id,
					page: 1,
					pageSize: 20000
				}).then(res=>{
					if(res.code == 200){
						this.mangmentUserList = res.data
						this.mangmentUserList.items.filter(item=>{
							if(item.userId == this.serviceTeam.userId){
								this.serviceTeam.phone = item.phone
							}
						})
						// console.log(this.mangmentUserList)
						// this.dialogTableData.items.forEach((v, i)=>{
						// 	v.isAdmin = false
						// 	v.director = 0
						// })
						// setTimeout(()=>{
						// 	this.selectTables()
						// }, 100)
						// this.selectTables()
					}
				})
			},
			getMenbers(){
				this.$request.postForm(this.$api.teamQueryUsers, this.dialogQueryData).then(res=>{
					if(res.code == 200){
						this.dialogTableData = res.data
						// this.dialogTableData.items.forEach((v, i)=>{
						// 	v.isAdmin = false
						// 	v.director = 0
						// })
						setTimeout(()=>{
							this.selectTables()
						}, 100)
						// this.selectTables()
					}
				})
			},
			selectTables(){
				// 初始化表格选中状态
				this.dialogTableData.items.forEach((v, i)=>{
					if(this.dialogSelectData.has(v.userId)){
						// console.log(v)
						this.$refs.multipleTable.toggleRowSelection(v)
					}
				})
				this.$forceUpdate()
			},
			handleSelectionChange(e){
				// 表格选中数据
				// if (e.length > 0) {
					e.forEach((v)=>{
						this.dialogSelectData.set(v.userId, v)
					})
				// } else{
				// 	this.dialogSelectData.clear()
				// }
				// console.log(this.dialogSelectData)
			},
			rowSelect(selection, row){
				// 单选某一行时的函数
				if (this.dialogSelectData.has(row.userId)){
					this.dialogSelectData.delete(row.userId)
				} else {
					this.dialogSelectData.set(row.userId, row)
				}
				// console.log(this.dialogSelectData)
			},
			dialogTableDataPaginaClick(val){
				this.dialogQueryData.page = val
				this.getMenbers()
			},
			selectionChange(e){
				// console.log(e)
				this.mangmentUserList.items.filter(item=>{
					if(item.userId == e){
						this.serviceTeam.phone = item.phone
					}
				})
			},
			getAddressData(obj){
				console.log(obj)
				this.serviceTeam.serviceAddress = obj.text
				this.serviceTeam.serviceAddressId = obj.key
			},
			accomplish(){
				if(!this.serviceTeam.serviceTeamName){
					this.$message.error('名称不能为空')
					return
				} else if(!this.serviceTeam.serviceAddress){
					this.$message.error('地址不能为空')
					return
				}
				this.serviceTeam.serviceTeamId = this.$route.params.id
				this.$request.get(this.$api.updateServiceTeamName, this.serviceTeam).then(res=>{
					if(res.code == 200){
						this.$message.success('修改成功')
						setTimeout(()=>{
							this.$router.back()
						},300)
					}
				})
			},
			confirmAdd(){
				// teamAddMember
				this.$request.postForm(this.$api.teamAddMember, {
					teamId: this.$route.params.id,
					userId: [...this.dialogSelectData.keys()]
				}).then(res=>{
					if(res.code == 200){
						this.$message.success('添加成功')
						// 获取服务队信息
						// this.getPageData()
						// 获取主管列表
						this.getMangmentUserList()
						this.$refs.serviceConfig.getPageData()
						this.dialogVisible = false
					}
				})
			},
			serviceConfigcallback(){
				// 获取主管列表
				this.getMangmentUserList()
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb {
		padding: 10px 20px;
	}

	.tableNavBox {
		padding: 0 20px;
		padding-bottom: 40px;
		border-bottom: 1px solid #DCDCDC;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		/* margin-top: 20px; */
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}
	.formWidth{
		width: 450px;
	}
	/* .equipmentEditor {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 20px;
	} */

	/* .tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	} */
	.pageContent {
		height: 40px;
		line-height: 40px;
	}

	.pageContent>>>.isdelete {
		color: #F42929;
	}
	.submitBtns{
		text-align: center;
		padding: 40px 0;
	}
	.submitBtns button{
		width: 150px;
	}
	.tableBoxTable>>> .el-upload {
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
		margin-right: 40px;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 150px;
	    height: 150px;
	    line-height: 150px;
	    text-align: center;
		border: 1px dashed #d9d9d9;
	  }
	  .avatar {
	    width: 150px;
	    height: 150px;
	    display: block;
		border: 1px dashed #d9d9d9;
	  }
</style>
